<script setup lang="ts">
import courseApi, {CourseType} from '@/apis/modules/Course'
import {ElForm, ElMessage, ElMessageBox} from 'element-plus'
import {ResponseResult} from 'types/result'
import {ref} from 'vue'
import {formRules} from '@/rules/editCourseRule'

const coursesList = ref<CourseType[]>()

type FormInstance = InstanceType<typeof ElForm>
const ruleFormRef = ref<FormInstance>()

// 获取列表
const fetch = async () => {
  const result = await courseApi.getResourceApi()
  coursesList.value = result.data?.data
}
fetch()

const course = ref<CourseType>({
  name: '',
  cover: '',
  episodes: [],
})

// 编辑
const editor = async (id: string) => {
  const result = await courseApi.getResourceApiById(id)
  course.value = result.data!
  dialogFormVisible.value = true
}

// 删除
const remove = (id: string) => {
  ElMessageBox.confirm('确定删除该课程吗', 'Warning', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
      .then(async () => {
        const result = await courseApi.removeResourceApi(id)
        if (result.code === 0) {
          ElMessage({
            message: '删除成功',
            type: 'success',
            showClose: true,
          })
          fetch()
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
          showClose: true,
        })
      })
}

const dialogFormVisible = ref(false)

// 提交
const editorSubmit = () => {
  ruleFormRef.value?.validate(async valid => {
    // 验证失败时拦截
    if (!valid) return false

    let result: ResponseResult<CourseType>
    if (course.value._id) {
      result = await courseApi.updateResourceApiById(course.value._id, course.value)
    } else {
      result = await courseApi.createResourceApi({
        name: course.value.name,
        cover: course.value.cover,
        episodes: course.value.episodes,
      })
    }
    await fetch()
    if (result.code === 0) {
      ElMessage({
        message: course.value._id ? '修改成功' : '创建成功',
        type: 'success',
        showClose: true,
      })
    }
    dialogFormVisible.value = false
  })
}

// 取消
const cancelEditor = () => {
  dialogFormVisible.value = false
  ElMessage('已取消')
}

const search = ref('')
</script>

<template>
  <div class="course">
    <h2 style="font-size: 20px">课程管理</h2>
    <div class="search">
      <el-input v-model="search" placeholder="请输入搜索内容" clearable></el-input>
      <el-button type="primary" size="default" @click="dialogFormVisible = true">添加课程</el-button>
    </div>
    <el-table :data="coursesList" border style="width: 100%">
      <el-table-column align="center" label="#" type="index"/>
      <el-table-column align="center" prop="_id" label="id"/>
      <el-table-column align="center" prop="name" label="课程名"/>
      <el-table-column align="center" prop="cover" label="封面"/>
      <el-table-column align="center" label="操作" #default="{ row }">
        <el-button type="primary" size="small" @click="editor(row._id)">编辑</el-button>
        <el-button type="danger" size="small" @click="remove(row._id)">删除</el-button>
      </el-table-column>
    </el-table>
    <!-- editor dialog  -->
    <el-dialog v-model="dialogFormVisible" title="编辑课程">
      <el-form :model="course" :rules="formRules" ref="ruleFormRef">
        <el-form-item label="课程名称" prop="name">
          <el-input v-model="course.name" autocomplete="off" placeholder="请输入课程名称"></el-input>
        </el-form-item>
        <el-form-item label="课程封面" prop="cover">
          <el-input v-model="course.cover" autocomplete="off" placeholder="请输入课程封面"></el-input>
        </el-form-item>
        <el-form-item label="课时内容">
          <el-input v-model="course.episodes" autocomplete="off" placeholder="请输入课时"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="编辑">
          <el-button @click="cancelEditor">取消</el-button>
          <el-button type="primary" @click="editorSubmit">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- editor dialog end -->
  </div>
</template>

<style scoped lang="scss">
.course {
  .search {
    display: flex;
    width: 400px;
    padding: 10px 0;

    .el-input {
      margin-right: 15px !important;
    }
  }
}
</style>
